<template>
  <div id="app">
    <el-form ref="form" :inline="true" label-width="80px">
      <el-form-item label="排序方式">
        <el-select v-model="page.orderBy">
          <el-option label="销售日期" value="saledate"></el-option>
          <el-option label="销售数量" value="quantity"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item align="left">
        <el-button type="primary" @click="toDoAajx">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        header-align="center"
        align="center"
        type="selection">
      </el-table-column>
      <el-table-column
        label="序号"
        width="50"
        type="index">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        width="180">
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="saledate"
        label="销售时间">
      </el-table-column>
    </el-table>
    <el-pagination
      layout="sizes, prev, pager, next, jumper, ->, total"
      :total="page.total"
      :page-size="page.pageSize"
      :page-sizes="[2,4,6,8]"
      :current-page="page.pageNum"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          tableData: [],
          page:{pageNo:1,pageSize:2,orderBy:"saledate"}
        }
      },
      methods:{
        handleSizeChange(size){
          this.page.pageSize=size;
          this.toDoAajx();
        },
        toDoAajx(){
          this.axios({
            url:"/sales",
            method:"get",
            params:this.page
          }).then((resp)=>{
            this.tableData=resp.data.list;
            this.page.total=resp.data.total;
            this.page.pageNum=resp.data.pageNum;
          })
        },
        handleCurrentChange(pageNo){
          this.page.pageNo=pageNo;
          this.toDoAajx();
        }
      },
      created(){
        this.toDoAajx();
      }
    }
</script>


<style scoped>

</style>
